<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: xiaobai
 * @Date: 2021-06-10 14:33:30
 * @LastEditors: smallWhite
 * @LastEditTime: 2024-03-14 17:37:21
 * @FilePath: /huizhou-official-website/src/views/main.vue
-->
<template>
  <div class="bg-img">
    <Header ref="getHeight">
    </Header>
    <router-view></router-view>
    <Footer></Footer>
    <BackTop></BackTop>
  </div>
</template>

<script>
import Header from '../components/header_index.vue'
import Footer from '../components/footer'
import BackTop from '../components/back_top'

export default {
  components: { Header, Footer, BackTop },
  data() {
    return {
      scrollTop: 0
    }
  },
  watch: {
    $route: {
      handler: function () {
        this.getHtmlBodyHeight()
      }
    }
  },
  methods: {
    getHtmlBodyHeight() {
      //获取滚动时的高度
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (this.scrollTop > 0) {
        this.goTop()
        this.scrollTop = 0
      }
    },
    goTop() {
      var timer = null
      cancelAnimationFrame(timer)
      timer = requestAnimationFrame(function fn() {
        var oTop = document.body.scrollTop || document.documentElement.scrollTop
        if (oTop > 0) {
          document.body.scrollTop = document.documentElement.scrollTop = oTop - 50
          timer = requestAnimationFrame(fn)
        } else {
          cancelAnimationFrame(timer)
        }
      })
    }
  }
}
</script>

<style>
.el-menu.el-menu--horizontal {
  border-bottom: 0 !important;
}
.el-menu {
  background: transparent !important;
}
.el-submenu__title i {
  color: #ffffff !important;
}
.el-menu--horizontal .el-menu .el-submenu .el-menu .el-menu-item {
  height: 36px !important;
  line-height: 36px !important;
}
</style>